<template>
	<div class="home-icon">
		<swiper :options="swiperOption" class="icon-iconlist">
		    <swiper-slide v-for="(pagess,index) in page" :key="index">
		    	<div class="iconlist" v-for="(item,index) in pagess" :key="item.id">
					<img :src="item.imgurl" alt="图片">
					<p>{{ item.name }}</p>
				</div>
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
	    </swiper>
	</div>
</template>
<script>
	export default{
		props:["iconlist"],
		data(){
			return {
				swiperOption: {
		            pagination: {
		                el:".swiper-pagination"
		            },
		        }
			}
		},
		computed:{
			page(){
				var pages = []
				this.iconlist.forEach((item,index)=>{
					var ind = Math.floor(index/8)
					if(!pages[ind]){
					    pages[ind] = []
					}
						pages[ind].push(item)
				})
				return pages
			}
		}
	}
</script>
<style scoped>
	.icon-iconlist{
		height: 4rem;
	}
	.home-icon{
		width:100%;
		background-color: #fff;
	}
	.iconlist{
		width: 25%;
		float:left;
		text-align: center;
	}
	.iconlist img{
		width: 1.1rem;
	    height: 1.1rem;
	    padding-top: .1rem;
	}
	.iconlist p{
		margin-top: .1rem;
	    color: #212121;
	    font-size: .28rem;
	}
	.home-icon .swiper-pagination-bullets {
	    bottom:0;
	    left: 0;
	    width: 100%;
	}
</style>